﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ListViewFlower.ascx.cs" Inherits="Pages_ListViewFlower" %>




<style type='text/css'>
#page_navigation a{
	padding:3px;
	border:1px solid gray;
	margin:2px;
	color:black;
	text-decoration:none
}
#page_navigation a:hover{background:#ccc;}
.active_page{
	background:#555;
	color:red !important;
}

</style>
<script language="javascript" type="text/javascript">
       $(document).ready(
    function () {
        $('#main_hoa>div.item').each(
        function () {
            var $img = $(this).find('a>img').attr('src');
            var $gia = $(this).find('p>span').text();
            var $div = $('#d').text();
            
            $(this).find('div.info').prepend('<img src=' + $img + ' /><p class="title"> Đơn Giá:' + $gia + '</p><br/><b>'+$div+'</b>')
        })
        $('#main_hoa>div.item>a>img#imgc').hover(function () {
//                        $.ajax({
//                            type: "POST",
//                            contentType: "application/json; charset=utf-8",
//                            url: "ShowFlower.aspx/Test",
//                            data: "{}",
//                            dataType: "json",
//                            success: function (data) { $('#demotest').html(data.d); }
//                        })

            $(this).parent().parent().find('div.info').show()
        }, function () {
            $(this).parent().parent().find('div.info').hide()
        }).mousemove(function (e) {
            var $X = e.clientX
            var $Y = e.clientY
            $(this).parent().parent().find('div.info').css({ 'left': $X + 20, 'top': $Y })
        }).click(function () {
            var $link = $(this).parent().parent().find('a').attr('href')
            window.open($link, '')
        })
    });


</script>
<script type='text/javascript'>
//<![CDATA[
    $(document).ready(function () {

        //how much items per page to show
        var show_per_page = 12;
        //getting the amount of elements inside content div
        var number_of_items = $('#main_hoa').children().size();
        //calculate the number of pages we are going to have
        var number_of_pages = Math.ceil(number_of_items / show_per_page);

        //set the value of our hidden input fields
        $('#current_page').val(0);
        $('#show_per_page').val(show_per_page);

        //now when we got all we need for the navigation let's make it '

        /*
        what are we going to have in the navigation?
        - link to previous page
        - links to specific pages
        - link to next page
        */
        var navigation_html = '<a class="previous_link" href="javascript:previous();">«</a>';

        var current_link = 0;
        while (number_of_pages > current_link) {
            navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
            current_link++;
        }

        navigation_html += '<a class="next_link" href="javascript:next();">»</a>';

        $('#page_navigation').html(navigation_html);

        //add active_page class to the first page link
        $('#page_navigation .page_link:first').addClass('active_page');

        //hide all the elements inside content div
        $('#main_hoa').children().css('display', 'none');

        //and show the first n (show_per_page) elements
        $('#main_hoa').children().slice(0, show_per_page).css('display', 'block');

    });

    function previous() {

        new_page = parseInt($('#current_page').val()) - 1;
        //if there is an item before the current active link run the function
        if ($('.active_page').prev('.page_link').length == true) {
            go_to_page(new_page);
        }

    }

    function next() {
        new_page = parseInt($('#current_page').val()) + 1;
        //if there is an item after the current active link run the function
        if ($('.active_page').next('.page_link').length == true) {
            go_to_page(new_page);
        }

    }
    function go_to_page(page_num) {
        //get the number of items shown per page
        var show_per_page = parseInt($('#show_per_page').val());

        //get the element number where to start the slice from
        start_from = page_num * show_per_page;

        //get the element number where to end the slice
        end_on = start_from + show_per_page;

        //hide all children elements of content div, get specific items and show them
        $('#main_hoa').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

        /*get the page link that has longdesc attribute of the current page and add active_page class to it
        and remove that class from previously active page link*/
        $('.page_link[longdesc=' + page_num + ']').addClass('active_page').siblings('.active_page').removeClass('active_page');

        //update the current page input field
        $('#current_page').val(page_num);
    }
//]]>
</script>
<div class="body">
        <div class="list" align="center" >
            Hoa mới
        </div>
        
    <div class="out" style="cursor:auto; ">
        <input type='hidden' id='current_page' />
	    <input type='hidden' id='show_per_page' />

      <div  id="main_hoa" align="center"  >
         <asp:ListView ID="ListView1" runat="server" 
            >
            <LayoutTemplate>
                <div id="ItemPlaceHolder"  runat="server">Ten</div>
            </LayoutTemplate>
           
            <ItemTemplate>
            
                 <div class="item" id='<%#Eval("MASP") %>'  >                 
                <%-- --%>
                    <a href='ProductDetails.aspx?ID=<%#Eval("MASP") %>'  >
                    <img id="imgc" src='../Images/total/<%#Eval("HINHSP") %>' alt="" />                   
                   </a>
                 
                    <p>Mệnh giá :<span style="color:Red"><%#Eval("DONGIA") %>đ</span></p>
                    <p><a href='ProductDetails.aspx?ID=<%#Eval("MASP") %>'>Chi tiết...</a></p>  
                   
                    <div  class="info"></div>
                      
                                
                </div>
               
            </ItemTemplate>
          
            <EmptyDataTemplate>
                <p class="status">Không có sản phẩm nào trong danh mục này</p>
            </EmptyDataTemplate>
        </asp:ListView>
        
      </div> 
      <div id='page_navigation'></div>

     <%-- <div align="center">
          <asp:DataPager ID="DataPager1" PagedControlID="ListView1" PageSize="12" runat="server">
            <Fields>
             <asp:NextPreviousPagerField

                         ButtonType="Button"

                         ShowFirstPageButton="true"

                         ShowLastPageButton="true"

                         ShowNextPageButton="true"

                         ShowPreviousPageButton="true" />

           <asp:NumericPagerField />                          
          </Fields>
          </asp:DataPager>
        </div>--%>
        <asp:ObjectDataSource ID="objDsProducts" runat="server"
          SelectMethod="SelectTopSanPham" TypeName="DALSanPham">
            <SelectParameters>
                <asp:Parameter DefaultValue="15" Name="top" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
     </div>			
</div>